<template>
  <div id="">
    <div class="banner">
    <swiper :options="swiperOption">
    <swiper-slide v-for="(items,index) in bannerList" :key="items.key">
      <span @click="bannerCK(index)">
        <img :src="items.bannerPic" alt="">
      </span>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="jc"></div>
    </div>

    <mt-popup
      v-model="isMintPicker" style="width:80%; text-align:center; background:none">
      <img :src="bannerImg" alt="" width="100%" height="300px">
      <img src="@/assets/images/wrong2@2x.png" alt="" width="30" class="mt20" @click="closePopup">
    </mt-popup>
  </div>
</template>
<script>
export default {
  name: "",
  props:["bannerList"],
  data: () => ({
    swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay:{
          delay: 3000,
        	disableOnInteraction: false,
        },
        paginationClickable: true,
        // loop: true,
     },
     isMintPicker:false,
     bannerImg:'',
  }),
  created(){
    // console.log(this.bannerList);
  },
  methods: {
    bannerCK(index) {
      let that = this;
      let banner = that.bannerList[index];
      console.log(banner);
      if(banner.bannerUrl){
        // that.$router.push({path:'banner.bannerUrl'})
        window.location.href=banner.bannerUrl;
      }else{

        that.isMintPicker = true;
        that.bannerImg = banner.bannerPic;
      }
    },
    closePopup() {
      this.isMintPicker = false;
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/main.scss";
.banner .swiper-pagination-bullet{background:white;}
.banner .swiper-pagination-bullet-active{background:$lightColor;}
.banner{
  padding: 0;
  img{
    width: 100%;
    height: 14rem;
  }
}
</style>
